<template>
	<view class="member-page pageBg">
		<view @click="fanhui('/pages/user/user')" class="fanhui">
			<uni-icons type="left" size="30"></uni-icons>
		</view>
		<view class="header">
			<text class="title">成员名单</text>
			<view class="year-tabs">
				<view
					v-for="(cohort, index) in cohorts"
					:key="cohort.year"
					class="year-tab"
					:class="{ active: currentIndex === index }"
					@click="handleTabClick(index)"
				>
					{{ cohort.year }}届
				</view>
			</view>
		</view>

		<swiper class="cohort-swiper" :current="currentIndex" @change="handleSwiperChange" circular>
			<swiper-item v-for="cohort in cohorts" :key="cohort.year">
				<scroll-view scroll-y class="cohort-content">
					<view class="group-card leader">
						<view class="group-header">
							<text class="group-title">负责人：</text>
						</view>
						<view class="user-list grid">
							<view class="user-item" v-for="user in cohort.leaders" :key="user.id"> 
								<view class="meta">
									<text class="name">{{ user.name }}</text> 
								</view>
							</view>
						</view>
					</view>

					<view class="group-card member">
						<view class="group-header">
							<text class="group-title">成员：</text>
							<text class="group-count">{{ cohort.members.length }}人</text>
						</view>
						<view class="user-list grid">
							<view class="user-item" v-for="user in cohort.members" :key="user.id">
								<view class="meta">
									<text class="name">{{ user.name }}</text> 
								</view>
							</view>
						</view>
					</view>

					<view class="group-card teacher">
						<view class="group-header">
							<text class="group-title">指导老师：</text>
							<text class="group-count">{{ cohort.teachers.length }}人</text>
						</view>
						<view class="user-list grid">
							<view class="user-item" v-for="user in cohort.teachers" :key="user.id"> 
								<view class="meta">
									<text class="name">{{ user.name }}</text>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script setup>
	import { ref } from 'vue'

	const fanhui = (e) => {
		uni.switchTab({
			url: e
		})
	}
	// 单届数据（可扩展为多届）
	const cohorts = ref([
		{
			year: 2025,
			leaders: [
				{ id: 'l2025_1', name: '彭飞' },
				{ id: 'l2025_2', name: '刘凯撒' }
			],
			members: [
				{ id: 'm2025_1', name: '郑吕彤' },
				{ id: 'm2025_2', name: '付鑫' },
				{ id: 'm2025_3', name: '党志昊' },
				{ id: 'm2025_4', name: '陈露岩' },
				{ id: 'm2025_5', name: '李颖怡' },
				{ id: 'm2025_6', name: '刘卓' },
				{ id: 'm2025_7', name: '王鑫' },
				{ id: 'm2025_8', name: '刘渊' },
				{ id: 'm2025_9', name: '韩子杰' },
				{ id: 'm2025_10', name: '袁航' },
				{ id: 'm2025_11', name: '黄秀容' },
				{ id: 'm2025_12', name: '付成亮' },
				{ id: 'm2025_13', name: '蒋沛航' },
				{ id: 'm2025_14', name: '施桂媛' },
				{ id: 'm2025_15', name: '陈龙' },
				{ id: 'm2025_16', name: '汪俊男' },
				{ id: 'm2025_17', name: '李城祎' },
				{ id: 'm2025_18', name: '杨神' },
				{ id: 'm2025_19', name: '李俊杰' },
				{ id: 'm2025_20', name: '王瑞林' },
				{ id: 'm2025_21', name: '何政' },
				{ id: 'm2025_22', name: '陈彦霖' },
				{ id: 'm2025_23', name: '张晋' },
				{ id: 'm2025_24', name: '李柳垟' },
				{ id: 'm2025_25', name: '赵晨烨' }
			],
			teachers: [
				{ id: 't2025_1', name: '游雯婷' },
				{ id: 't2025_2', name: '张正梁' },
				{ id: 't2025_3', name: '柏金江' },
				{ id: 't2025_4', name: '田野' }
			]
		},
		{
			year: 2024,
			leaders: [
				{ id: 'l1', name: '彭飞' },
				{ id: 'l2', name: '严文君' }
			],
			members: [
				{ id: 'm2024_0', name: '张金鹏' },
				{ id: 'm2024_0', name: '花必锦' },
				{ id: 'm2024_0', name: '晏佳利' },
				{ id: 'm2024_0', name: '陈涛' },
				{ id: 'm2024_0', name: '李俊宏' },
				{ id: 'm2024_0', name: '张祥' },
				{ id: 'm2024_1', name: '袁宗耀' },
				{ id: 'm2024_2', name: '孙朝森' },
				{ id: 'm2024_3', name: '肖科' },
				{ id: 'm2024_4', name: '聂家乐' },
				{ id: 'm2024_0', name: '李飞雪' },
				{ id: 'm2024_2', name: '郑吕彤' },
				{ id: 'm2024_3', name: '付鑫' },
				{ id: 'm2024_4', name: '党志昊' },
				{ id: 'm2024_5', name: '陈露岩' },
				{ id: 'm2024_6', name: '李颖怡' },
				{ id: 'm2024_7', name: '刘凯撒' },
				{ id: 'm2024_8', name: '刘卓' },
				{ id: 'm2024_9', name: '王鑫' },
				{ id: 'm2024_10', name: '刘渊' },
				{ id: 'm2024_11', name: '韩子杰' },
				{ id: 'm2024_12', name: '袁航' },
				{ id: 'm2024_13', name: '黄秀容' },
				{ id: 'm2024_14', name: '付成亮' },
				{ id: 'm2024_15', name: '张晋' },
				{ id: 'm2024_16', name: '李柳垟' },
				{ id: 'm2024_17', name: '赵晨烨' },
				{ id: 'm2024_18', name: '蒋沛杭' }
			],
			teachers: [
				{ id: 't2024_1', name: '游雯婷' },
				{ id: 't2024_2', name: '张正梁' },
				{ id: 't2024_3', name: '柏金江' }
			]
		}
	])

	const currentIndex = ref(0)

	const handleSwiperChange = (e) => {
		currentIndex.value = e.detail.current
	}

	const handleTabClick = (index) => {
		currentIndex.value = index
	}
</script>

<style lang="scss" scoped>
.fanhui{
	margin-top: 80rpx;
}
	.member-page {
		padding: 20rpx;
	}

	.header {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
		padding: 20rpx 10rpx 0 10rpx;
	}

	.title {
		font-size: 44rpx;
		font-weight: 700;
		color: #222;
	}

	.year-tabs {
		display: flex;
		gap: 16rpx;
		flex-wrap: nowrap;
		overflow-x: auto;
		padding-bottom: 10rpx;
	}

	.year-tab {
		padding: 10rpx 22rpx;
		border-radius: 999rpx;
		background: #f1f5f9;
		color: #333;
		font-size: 28rpx;
		white-space: nowrap;
	}

	.year-tab.active {
		background: #28B389;
		color: #fff;
	}

	.cohort-swiper {
		height: calc(100vh - 220rpx);
	}

	.cohort-content {
		height: 100%;
		padding: 10rpx 0 40rpx 0;
	}

	.group-card {
		background: #fff;
		margin: 20rpx 0;
		border-radius: 20rpx;
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
		padding: 20rpx 24rpx;
	}

	.group-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10rpx;
	}

	.group-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #111;
	}

	.group-count {
		font-size: 26rpx;
		color: #667085;
	}

	.user-list {
		display: flex;
		flex-direction: column;
		gap: 16rpx;
	}

	.user-list.grid {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 20rpx;
	}

	.user-item {
		display: flex;
		align-items: center;
		gap: 16rpx;
		padding: 16rpx;
		border-radius: 16rpx;
		background: #f8fafc;
	}

	.meta {
		display: flex;
		flex-direction: column;
		gap: 6rpx;
	}

	.name {
		font-size: 30rpx;
		color: #111827;
	}
</style>